import React, {useEffect, useState} from 'react';
import { getProList } from '@/api/pro';

import { ProTable } from '@ant-design/pro-components';

interface IAppProps {
}

interface iPro {
  banners: string[]
  brand: string
  category: string
  desc: string
  discount: number
  img1: string
  img2: string
  img3: string
  img4: string
  isrecommend: number
  issale: number
  isseckill: number
  originprice: number
  proid: string
  proname: string
  sales: number
  stock: number
}

const App: React.FunctionComponent<IAppProps> = (props) => {

  const [proList,setProList] = useState()

  useEffect(()=>{
    getProList().then(res => {
      // console.log(res.data.data);
      setProList(res.data.data)
    })
  }, [])
  const columns = [
    {
      title: '序号',
      render(t: any,r: iPro,i: number){
        return (<span>{i + 1}</span>)
      }
    },{
      title: '商品名称',
      dataIndex: 'proname'
    }
  ]
  return (<>

    <h1>商品管理</h1>
    <ProTable
      dataSource={proList}
      rowKey={'proid'}
      columns={columns}
    />
  </>);
};

export default App;
